<template>
  <div class="zhebi">
    <div class="add-audio">
      <div class="title">莉香</div>
      <div class="info">
        <span>广播传媒中心</span><span>-</span><span>金鹰955</span>
      </div>
      <div class="btn-b">点播</div>
      <div class="list">当前待播<span>2</span>首</div>
      <div class="close"></div>
    </div>

  </div>
</template>
<style lang="scss" scoped>
.zhebi {
  background: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  .add-audio {
    position: absolute;
    width: 320px;
    height: 280px;
    border-radius: 10px;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    background: url(../images/icon-mango.png) no-repeat #ffffff center 0;
    .title {
      font-size: 24px;
      font-weight: bold;
      margin: 30px 0;
    }
    .info {
      font-size: 14px;
      span {
        padding: 0 5px;
      }
    }
    .btn {
      height: 48px;
      width: 260px;
      text-align: center;
      margin: 0 auto;
      line-height: 48px;
      background: linear-gradient(to right, #f0244e, #fa8c63);
      border-radius: 48px;
      color: white;
      margin-top: 30px;
    }
    .btn-b {
      height: 48px;
      width: 260px;
      text-align: center;
      margin: 0 auto;
      line-height: 48px;
      background: linear-gradient(to right, #e5e0dd, #edecec);
      border-radius: 48px;
      color: white;
      margin-top: 30px;
    }
    .list {
      margin-top: 20px;
      font-size: 14px;
      span {
        padding: 0 3px;
      }
    }
  }

  .close {
    background: url(../images/icon-close.png) no-repeat;
    position: absolute;
    bottom: -50px;
    width: 38px;
    height: 38px;
    left: calc(50% - 19px);
  }
}
</style>
